﻿<%@ Page Title="" Language="C#" MasterPageFile="~/SIPO.master" AutoEventWireup="false" CodeFile="recLoadReconlist.aspx.cs" 
Inherits="SIPO.Web.Lists.Transaction.recLoadReconlist" %>

<asp:Content ID="Content1" ContentPlaceHolderID="body" Runat="Server">
    <link href="<%= ResolveUrl("~/styles/chosen/chosen.min.css") %>" rel="stylesheet" type="text/css" />

    <script src="<%= ResolveUrl("~/scripts/plupload/moxie.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/plupload/plupload.full.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/jquery.inputmask.bundle.min.js") %>" type="text/javascript"></script>
    <script src="<%= ResolveUrl("~/scripts/chosen/chosen.jquery.min.js") %>" type="text/javascript"></script>

    <link type="text/css" rel="stylesheet" href="<%= ResolveUrl("~/styles/ui.jqgrid.css") %>" />
    <script type="text/javascript" src="<%= ResolveUrl("~/scripts/i18n/grid.locale-id.js") %>"></script>
    <script type="text/javascript" src="<%= ResolveUrl("~/scripts/jquery.jqGrid.min.js") %>"></script>

    <style type="text/css">
        .style1
        {
            width: 225px;
        }
        .style2
        {
            width: 111px;
        }
    </style>

    <%--Uploader--%>
    <script type="text/javascript">
        $(document).ready(function () {

            var uploader = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight',
                browse_button: 'pickfiles',
                container: 'container',
                max_file_size: '5mb',
                url: '<%= ResolveUrl("~/AjaxHandler/Transaction/recLoadReconhandler.ashx") %>' + '?method=insert',
                flash_swf_url: '<%= ResolveUrl("~/scripts/plupload/Moxie.swf") %>',
                silverlight_xap_url: '<%= ResolveUrl("~/scripts/plupload/Moxie.xap") %>',
                filters: [
            { title: "Excel files", extensions: "xls,xlsx" }
		],
                resize: { width: 320, height: 240, quality: 90 }
            });

            uploader.bind('Init', function (up, params) {

                var msg = 'Untuk dapat melakukan proses unggah / upload dokumen, browser anda harus mendukung salah satu teknologi, HTML 5 / Flash / Silverlight';

                if (params.runtime == 'html5') {
                    msg = '';
                } else if (params.runtime == 'flash') {
                    msg = '';
                } else if (params.runtime == 'silverlight') {
                    msg = ''
                }

                if (msg != '') {
                    alert(msg);
                }

            });

            uploader.init();

            uploader.bind('FilesAdded', function (up, files) {

                if (up.files.length > 1) {
                    alert('Hanya diperbolehkan satu file untuk di upload!');
                    return false;
                }

                $.each(files, function (i, file) {
                    $('#filelist').append(
                        '<div id="' + file.id + '">' +
                file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' + '</div>');
                });

                up.refresh(); // Reposition Flash/Silverlight
            });

            uploader.bind('FileUploaded', function (up, file, info) {

                var err = JSON.parse(info.response);
                alert(err.Message);

            });

            uploader.bind('Error', function (up, err) {

                var errMsg = '';

                switch (err.code) {
                    case (-600):
                        errMsg = 'File tidak boleh lebih dari 5 Mb';
                        break;
                    case (-601):
                        errMsg = 'File harus berformat excel!';
                        break;
                    default:
                        errMsg = err.code + ' - ' + err.message;
                        break;
                }

                alert(errMsg);

                up.refresh(); // Reposition Flash/Silverlight

            });

            $("#btnLoad").click(function (e) {
                e.preventDefault();

                var bankId = $('#<%=ddlBank.ClientID %> option:selected').val();

                if (bankId != '') {
                    var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Transaction/recLoadReconhandler.ashx") %>';

                    if (uploader.files.length > 0) // Insert with uploaded file.
                    {
                        var bankLabel = $('#<%=ddlBank.ClientID %> option:selected').text();
                        var arr = bankLabel.split('-');

                        uploader.settings.multipart_params = {
                            'ddlBank': bankId,
                            'bankName': $.trim(arr[1]),
                            'txtKeterangan': encodeURIComponent($('#txtKeterangan').val())
                        };

                        uploader.settings.url = handlerUrl + '?method=insert';
                        uploader.start();
                    }
                    else {
                        alert('Tidak ada file yang di-load !');
                    }

                    setTimeout("parent.$('#table').trigger('reloadGrid');", 3000);
                    $("#table").jqGrid('setGridParam', { url: handlerUrl + '?method=getdatainsession' }).trigger('reloadGrid');

                    return false;
                }
                else {
                    alert("Anda harus memilih Bank dan melampirkan File !");
                }
            });
        });
    </script>

    <script type="text/javascript" language="javascript">
        $(function () {
            $('#ddlBank').chosen({ placeholder_text_single: "-- pilih bank --" });
        });

    </script>

    <table border="0">
        <tr>
            <td style="width: 50">
                Bank
            </td>
            <td>
                :
            </td>
            <td>
                <asp:DropDownList ID="ddlBank" runat="server" Width="300">
                </asp:DropDownList>
                &nbsp;&nbsp;&nbsp;<span style="color: Red;">*</span>
            </td>
        </tr>
        <tr>
            <td>
                Keterangan
            </td>
            <td>
                :
            </td>
            <td>
                <input type="text" id="txtKeterangan" style="width:250px" />
                <%--<asp:TextBox ID="txtKeterangan" runat="server" Width="200"></asp:TextBox>--%>
            </td>
        </tr>
        <tr>
            <td style="width: 50">
                Lampiran
            </td>
            <td>
                :
            </td>
            <td>
                <div id="container">
                    <a id="pickfiles" class="plupload_button plupload_add ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
                        href="#"><span class="ui-button-icon-primary ui-icon ui-icon-circle-plus" /><span
                            class="ui-button-text">Add Files</span> </a>
                    <br />
                    <br />
                    <div id="filelist"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                &nbsp;
            </td>
            <td>
                <div style="text-align: right; padding-top: 10px;">
                    <button id="btnLoad" type="button">
                        Load</button>
                </div>
            </td>
        </tr>
    </table>
    <br />
    <br />
    <table id="table" class="scroll" cellpadding="0" cellspacing="0">
    </table>
    <div id="pager" class="scroll">
    </div>
    <br />
    <div id="dialog" title="Default dialog">
    </div>
    <script type="text/javascript">
        $("#btnLoad").button({ icons: { primary: "ui-icon-plus"} });
    </script>
    <script type="text/javascript">
        var handlerUrl = '<%= ResolveUrl("~/AjaxHandler/Transaction/recLoadReconhandler.ashx") %>';

        $('#table').jqGrid({
            //url: handlerUrl + '?method=getdatainsession',
            datatype: 'json',
            colNames: ['Tgl. Transaksi', 'ID Transaksi', 'Briva', 'No. Surat Setor', 'Transaksi', 'Jenis Mutasi', 'Nilai', 'Saldo'],
            colModel: [
                    { name: 'TransDate', index: 'TransDate', align: 'center', width: 0,
                        formatter: 'date', formatoptions: { newformat: 'd M Y' }
                    },
                    { name: 'TransID', index: 'TransID', align: 'center', width: 0 },
                    { name: 'Bravia', index: 'Bravia', align: 'center', width: 0 },
                    { name: 'InvoiceNo', index: 'InvoiceNo', width: 0 },
                    { name: 'TransNote', index: 'TransNote', width: 0 },
                    { name: 'MutationType', index: 'MutationType', align: 'center', width: 0 },
                    { name: 'MutationValue', index: 'MutationValue', formatter: 'number', align: 'right', width: 0 },
                    { name: 'Balance', index: 'Balance', formatter: 'number', align: 'right', width: 0 }
           	],
            rowNum: 10,
            id: 'LoadDetailID',
            rownumbers: true,
            rowList: [5, 10, 15, 20],
            pager: '#pager',
            sortname: 'LoadDetailID',
            gridview: true,
            sortorder: "asc",
            viewrecords: true,
            jsonReader: { repeatitems: false },
            width: 1250,
            height: '100%',
            caption: 'Load Rekening Koran',
            ajaxGridOptions: { cache: false }
        });

        $("#table").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, searchtext: 'Search', refreshtext: 'Refresh' },
        {}, {}, {}, { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true });
    </script>
</asp:Content>

